<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆绑定 - 智慧园区</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .ios-status-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
            z-index: 50;
        }
        
        .ios-status-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .ios-tab-bar {
            height: 83px; /* 包含安全区域的高度 */
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            padding-bottom: 30px; /* 安全区域 */
            z-index: 50;
        }
        
        .ios-tab-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
        }
        
        .tab-icon {
            font-size: 22px;
            margin-bottom: 4px;
        }
        
        .tab-label {
            font-size: 10px;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .glass-card.dark {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .main-content {
            height: calc(100vh - 127px); /* 状态栏 + 底部导航的高度 */
            overflow-y: auto;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            padding-bottom: 20px;
        }
        
        .main-content::-webkit-scrollbar {
            display: none;
        }
        
        .dark-mode .glass-card {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-status-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-tab-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .car-item {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
            margin-bottom: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .dark-mode .car-item {
            background: rgba(30, 30, 30, 0.8);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }
        
        .car-header {
            padding: 16px;
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            color: white;
            position: relative;
        }
        
        .dark-mode .car-header {
            background: linear-gradient(135deg, #4338ca, #6d28d9);
        }
        
        .car-number {
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 2px;
        }
        
        .car-tag {
            position: absolute;
            top: 16px;
            right: 16px;
            background: rgba(255, 255, 255, 0.2);
            padding: 4px 10px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .car-body {
            padding: 16px;
        }
        
        .car-info-item {
            display: flex;
            margin-bottom: 12px;
        }
        
        .car-info-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background-color: #f3f4f6;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        .dark-mode .car-info-icon {
            background-color: #374151;
        }
        
        .car-info-content {
            flex: 1;
        }
        
        .car-info-label {
            font-size: 12px;
            color: #6b7280;
            margin-bottom: 2px;
        }
        
        .dark-mode .car-info-label {
            color: #9ca3af;
        }
        
        .car-info-value {
            font-size: 14px;
            color: #1f2937;
            font-weight: 500;
        }
        
        .dark-mode .car-info-value {
            color: #f3f4f6;
        }
        
        .car-footer {
            display: flex;
            border-top: 1px solid #f3f4f6;
        }
        
        .dark-mode .car-footer {
            border-top: 1px solid #374151;
        }
        
        .car-action {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 0;
            font-size: 13px;
            color: #4b5563;
            transition: background-color 0.2s;
        }
        
        .dark-mode .car-action {
            color: #9ca3af;
        }
        
        .car-action:hover {
            background-color: rgba(0, 0, 0, 0.03);
        }
        
        .dark-mode .car-action:hover {
            background-color: rgba(255, 255, 255, 0.03);
        }
        
        .car-action i {
            margin-right: 6px;
        }
        
        .car-action-divider {
            width: 1px;
            background-color: #f3f4f6;
        }
        
        .dark-mode .car-action-divider {
            background-color: #374151;
        }
    </style>
</head>
<body>
    <div id="app" class="relative h-full">
        <!-- iOS 状态栏 -->
        <div class="ios-status-bar">
            <div class="flex justify-between items-center w-full">
                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">9:41</div>
                <div class="flex space-x-2">
                    <i class="fas fa-signal text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-wifi text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-battery-full text-gray-800 dark:text-gray-200"></i>
                </div>
            </div>
        </div>
        
        <!-- 主内容 -->
        <div class="main-content bg-gray-50 dark:bg-gray-900">
            <!-- 顶部导航栏 -->
            <div class="px-4 py-3 bg-white dark:bg-gray-800 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-center">
                    <a href="home.html" class="mr-4">
                        <i class="fas fa-chevron-left text-gray-600 dark:text-gray-300"></i>
                    </a>
                    <h1 class="text-lg font-semibold text-gray-800 dark:text-gray-100">车辆管理</h1>
                </div>
                <a href="car-add.html" class="flex items-center text-blue-500 dark:text-blue-400">
                    <i class="fas fa-plus mr-1 text-sm"></i>
                    <span class="text-sm">添加车辆</span>
                </a>
            </div>
            
            <!-- 车辆列表 -->
            <div class="p-4">
                <!-- 我的车辆标题 -->
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-base font-semibold text-gray-800 dark:text-gray-200">我的车辆</h2>
                    <span class="text-sm text-gray-500 dark:text-gray-400">共3辆</span>
                </div>
                
                <!-- 车辆列表 -->
                <div class="space-y-4">
                    <!-- 车辆项 1 -->
                    <div class="car-item">
                        <div class="car-header">
                            <div class="car-number">浙A·12345</div>
                            <div class="text-xs mt-1 opacity-80">小型轿车 | 白色</div>
                            <div class="car-tag">默认</div>
                        </div>
                        <div class="car-body">
                            <div class="car-info-item">
                                <div class="car-info-icon">
                                    <i class="fas fa-car text-indigo-500"></i>
                                </div>
                                <div class="car-info-content">
                                    <div class="car-info-label">车辆品牌</div>
                                    <div class="car-info-value">本田 雅阁</div>
                                </div>
                            </div>
                            <div class="car-info-item">
                                <div class="car-info-icon">
                                    <i class="fas fa-calendar-alt text-green-500"></i>
                                </div>
                                <div class="car-info-content">
                                    <div class="car-info-label">绑定时间</div>
                                    <div class="car-info-value">2023-01-15</div>
                                </div>
                            </div>
                            <div class="car-info-item">
                                <div class="car-info-icon">
                                    <i class="fas fa-id-card text-blue-500"></i>
                                </div>
                                <div class="car-info-content">
                                    <div class="car-info-label">车位信息</div>
                                    <div class="car-info-value">A区 地下一层 A1-123</div>
                                </div>
                            </div>
                        </div>
                        <div class="car-footer">
                            <div class="car-action">
                                <i class="fas fa-edit text-blue-500"></i>
                                <span>编辑</span>
                            </div>
                            <div class="car-action-divider"></div>
                            <div class="car-action">
                                <i class="fas fa-parking text-green-500"></i>
                                <span>查看车位</span>
                            </div>
                            <div class="car-action-divider"></div>
                            <div class="car-action">
                                <i class="fas fa-trash-alt text-red-500"></i>
                                <span>解绑</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 车辆项 2 -->
                    <div class="car-item">
                        <div class="car-header" style="background: linear-gradient(135deg, #2563eb, #3b82f6);">
                            <div class="car-number">浙B·67890</div>
                            <div class="text-xs mt-1 opacity-80">SUV | 黑色</div>
                        </div>
                        <div class="car-body">
                            <div class="car-info-item">
                                <div class="car-info-icon">
                                    <i class="fas fa-car text-indigo-500"></i>
                                </div>
                                <div class="car-info-content">
                                    <div class="car-info-label">车辆品牌</div>
                                    <div class="car-info-value">宝马 X5</div>
                                </div>
                            </div>
                            <div class="car-info-item">
                                <div class="car-info-icon">
                                    <i class="fas fa-calendar-alt text-green-500"></i>
                                </div>
                                <div class="car-info-content">
                                    <div class="car-info-label">绑定时间</div>
                                    <div class="car-info-value">2023-04-20</div>
                                </div>
                            </div>
                            <div class="car-info-item">
                                <div class="car-info-icon">
                                    <i class="fas fa-id-card text-blue-500"></i>
                                </div>
                                <div class="car-info-content">
                                    <div class="car-info-label">车位信息</div>
                                    <div class="car-info-value">B区 地下二层 B2-056</div>
                                </div>
                            </div>
                        </div>
                        <div class="car-footer">
                            <div class="car-action">
                                <i class="fas fa-edit text-blue-500"></i>
                                <span>编辑</span>
                            </div>
                            <div class="car-action-divider"></div>
                            <div class="car-action">
                                <i class="fas fa-parking text-green-500"></i>
                                <span>查看车位</span>
                            </div>
                            <div class="car-action-divider"></div>
                            <div class="car-action">
                                <i class="fas fa-trash-alt text-red-500"></i>
                                <span>解绑</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 车辆项 3 -->
                    <div class="car-item">
                        <div class="car-header" style="background: linear-gradient(135deg, #0d9488, #14b8a6);">
                            <div class="car-number">浙C·54321</div>
                            <div class="text-xs mt-1 opacity-80">MPV | 银色</div>
                        </div>
                        <div class="car-body">
                            <div class="car-info-item">
                                <div class="car-info-icon">
                                    <i class="fas fa-car text-indigo-500"></i>
                                </div>
                                <div class="car-info-content">
                                    <div class="car-info-label">车辆品牌</div>
                                    <div class="car-info-value">丰田 埃尔法</div>
                                </div>
                            </div>
                            <div class="car-info-item">
                                <div class="car-info-icon">
                                    <i class="fas fa-calendar-alt text-green-500"></i>
                                </div>
                                <div class="car-info-content">
                                    <div class="car-info-label">绑定时间</div>
                                    <div class="car-info-value">2023-06-05</div>
                                </div>
                            </div>
                            <div class="car-info-item">
                                <div class="car-info-icon">
                                    <i class="fas fa-id-card text-blue-500"></i>
                                </div>
                                <div class="car-info-content">
                                    <div class="car-info-label">车位信息</div>
                                    <div class="car-info-value">C区 地面 C0-078</div>
                                </div>
                            </div>
                        </div>
                        <div class="car-footer">
                            <div class="car-action">
                                <i class="fas fa-edit text-blue-500"></i>
                                <span>编辑</span>
                            </div>
                            <div class="car-action-divider"></div>
                            <div class="car-action">
                                <i class="fas fa-parking text-green-500"></i>
                                <span>查看车位</span>
                            </div>
                            <div class="car-action-divider"></div>
                            <div class="car-action">
                                <i class="fas fa-trash-alt text-red-500"></i>
                                <span>解绑</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 温馨提示 -->
                <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl">
                    <div class="flex">
                        <i class="fas fa-info-circle text-blue-500 dark:text-blue-400 mt-0.5 mr-2"></i>
                        <div>
                            <h3 class="text-sm font-medium text-blue-700 dark:text-blue-300 mb-1">车辆绑定提示</h3>
                            <p class="text-xs text-blue-600 dark:text-blue-400 leading-relaxed">
                                1. 每个用户最多可绑定5辆车辆<br>
                                2. 车辆信息需与行驶证保持一致<br>
                                3. 若需解绑车辆，请确保无未缴纳的停车费<br>
                                4. 默认车辆将在通行时自动识别
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- iOS 底部导航栏 -->
        <div class="ios-tab-bar">
            <a href="home.html" class="tab-item text-gray-500 dark:text-gray-400">
                <i class="fas fa-home tab-icon"></i>
                <span class="tab-label">首页</span>
            </a>
            <div class="tab-item text-gray-500 dark:text-gray-400">
                <i class="fas fa-bullhorn tab-icon"></i>
                <span class="tab-label">公告</span>
            </div>
            <div class="tab-item text-gray-500 dark:text-gray-400">
                <i class="fas fa-user tab-icon"></i>
                <span class="tab-label">我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 检测系统暗色模式
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.body.classList.add('dark-mode');
            document.querySelectorAll('.ios-status-bar, .ios-tab-bar, .glass-card, .car-item').forEach(el => {
                el.classList.add('dark');
            });
        }
        
        // 监听系统暗色模式变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (e.matches) {
                document.body.classList.add('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-tab-bar, .glass-card, .car-item').forEach(el => {
                    el.classList.add('dark');
                });
            } else {
                document.body.classList.remove('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-tab-bar, .glass-card, .car-item').forEach(el => {
                    el.classList.remove('dark');
                });
            }
        });
    </script>
</body>
</html> 